@import url('custom/components.css');
@import url('custom/fonts/font-awesome.min.css');
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
@import url('vendor/nanoscroller.css');
@import url(http://fonts.googleapis.com/css?family=Sue+Ellen+Francisco);

html, body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin:0;
	font-family: sans-serif;
	overflow: hidden;
}

a{
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6{
	color: #333;
}
p{	
	margin-bottom: 20px;
	color: #333;
	font-size: 15px;
	line-height: 21px;
}

header{
	height: 45px;
	width: 100%;
	background-color: #232C31;
	border-bottom: 1px solid #3D3E3E;
}

#lesson-area{
	position: fixed;
	bottom: 0;
	left: 0;
	top: 45px;
	min-width: 320px;
	max-width: 320px;
	background: green;
	border-right: 1px solid #3D3E3E;
	overflow: hidden;
}

#practice-area{
	background: #272822;
	position: absolute;
	left: 320px;
	top: 45px;
	bottom: 0;
	right: 0;
}

#controls-bar{
	border-top: 1px solid #FFFFFF;
	background-color: #AFAEAE;
	position: fixed;
	height: 20px;
	width: 100%;
	bottom: 0;
	right: 0;
	left:320px;
	padding: 15px 20px 20px 20px;
}

#practice-editor{
	position: absolute;
	background: red;
	top: 0;
	left: 0;
	bottom: 56px;
	right: 0;
}

#editor .nano{background: red; width: 20px; position: absolute; right: 0;z-index: 0;}

.content{
	background: white;
	max-width: 100%;
	padding: 25px 25px 55px 25px !important;
}




#notes-panel{
	position: absolute;
	top: 20;
	height: 80%;
	min-height: 500px;
	width:400px;
	padding-left: 10px;
	left: 100%;
	z-index: 10;
}

#notepad{
	position: absolute;
	top: 20;
	height: 100%;
	min-height: 500px;
	width:400px;
	padding-left: 10px;
	left: 0;
	z-index: 10;
}
#rings{
	background: url(../media/images/clipper.png) repeat-y;
	width: 55px;
	height: 92%;
	float: left;
	margin-left: -7px;
	margin-top: 30px;
}
#sheet{
	background:  #ffffb3;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(0,0,0,0.6);
	box-shadow: 1px -1px 10px -1px black;
	font-size: 22px;
	font-family: 'Sue Ellen Francisco', cursive;
	line-height: 30px;
	letter-spacing: 0.4px;
	text-align: justify;
	margin-left: -1px;
	padding-right: 5px;
	border-radius: 0 10px 10px 0;
}
#sheet-content{
	margin-top: 30px;
	padding: 0px 20px 40px 10px;
	overflow-y: scroll;
	max-height: 82%;
	height: 82%;
	outline: none;
}

#toggle-btn{
	position: absolute;
	bottom: 45%;
	left: -92;
	height: 35px;
	width: 150px;
	background-image: linear-gradient(to bottom, #ff6926, #ff3614);
	border-radius: 8px 8px 0  0;
	box-shadow: -1px 0px 5px 1px black;
	padding-top: 55	px;
	-webkit-transform:rotate(-90deg);
	z-index: 1;
}

#pdf-btn{
	position: absolute;
	background-image: linear-gradient(to bottom, #0088cc, #0044cc);
	bottom: -56px;
	border-radius: 0 0 8px 8px;
	right: 10%;
	width: 150px;
	height: 35px;
	padding-top: 55	px;
	box-shadow: -1px 0px 5px 1px black;
}

#toggle-btn p, #pdf-btn p{
	line-height: 5px;
	text-align: center;
	color: white;
	font-family: sans-serif;
	font-weight: bolder;
	cursor: pointer;	
}

#notes-panel .content{
	background: transparent;
	width: 100%;
	

}






.nano { background: transparent;}
.nano .content { padding: 10px; }
.nano .pane   { background: tra; }
.nano .slider { background: #111; }